<template>
  <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="课程" prop="courseId">
        <el-select v-model="dataForm.courseId" placeholder="请选择题所属课程">
          <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试题题目" prop="content">
        <el-input v-model="dataForm.content" placeholder="试题题目"></el-input>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-select v-model="dataForm.difficulty" placeholder="请选择题目难度">
          <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="dataForm.type" placeholder="请选择题目难度" @change="changeQuestionType($event)">
          <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="questionType !== 4" label="选项A" prop="optionOne">
        <el-input v-model="dataForm.optionOne" placeholder="请输入选项A"></el-input>
      </el-form-item>
      <el-form-item v-if="questionType !== 4" label="选项B" prop="optionTwo">
        <el-input v-model="dataForm.optionTwo" placeholder="请输入选项B"></el-input>
      </el-form-item>
      <el-form-item v-if="questionType !== 2 && questionType !== 4" label="选项C" prop="optionThree">
        <el-input v-model="dataForm.optionThree" placeholder="请输入选项C"></el-input>
      </el-form-item>
      <el-form-item v-if="questionType !== 2 && questionType !== 4" label="选项D" prop="optionFour">
        <el-input v-model="dataForm.optionFour" placeholder="请输入选项D"></el-input>
      </el-form-item>
      <el-form-item v-if="questionType === 0" label="正确答案" prop="answer">
        <el-radio v-model="dataForm.answer" label="A"></el-radio>
        <el-radio v-model="dataForm.answer" label="B"></el-radio>
        <el-radio v-model="dataForm.answer" label="C"></el-radio>
        <el-radio v-model="dataForm.answer" label="D"></el-radio>
      </el-form-item>
      <el-form-item v-if="questionType === 1" label="正确答案" prop="answer">
        <el-checkbox-group v-model="answerList">
          <el-checkbox label="A"></el-checkbox>
          <el-checkbox label="B"></el-checkbox>
          <el-checkbox label="C"></el-checkbox>
          <el-checkbox label="D"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="questionType === 2" label="正确答案" prop="answer">
        <el-radio v-model="dataForm.answer" label="正确">正确</el-radio>
        <el-radio v-model="dataForm.answer" label="错误">错误</el-radio>
      </el-form-item>
      <el-form-item v-if="questionType === 4" label="标准答案" prop="discussContext">
        <el-input
            type="textarea"
            style="padding-bottom: 20px"
            :autosize="{minRows: 2, maxRow: 5}"
            v-model="dataForm.discussContext"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getObj, addObj, putObj} from '@/api/teacher/question'
import {fetchCourseList} from '@/api/teacher/course'

export default {
  data() {
    return {
      difficultyList: [{
        value: 0,
        label: '低'
      }, {
        value: 1,
        label: '中'
      }, {
        value: 2,
        label: '高'
      }, {
        value: 3,
        label: '超高'
      }],
      typeList: [{
        value: 0,
        label: '单选'
      }, {
        value: 1,
        label: '多选'
      }, {
        value: 2,
        label: '判断'
      },
        {
          value: 4,
          label: '主观'
      }
      ],
      questionType: '',
      visible: false,
      canSubmit: false,
      courseList: [],
      answerList: [],
      dataForm: {
        id: 0,
        courseId: '',
        content: '',
        difficulty: '',
        type: '',
        answer: 'A',
        optionOne: '',
        optionTwo: '',
        optionThree: '',
        optionFour: ''
      },
      dataRule: {
        optionOne: [
          {required: true, message: '选项不能为空！', trigger: 'blur'}
        ],
        optionTwo: [
          {required: true, message: '选项不能为空！', trigger: 'blur'}
        ],
        optionThree: [
          {required: true, message: '选项不能为空！', trigger: 'blur'}
        ],
        optionFour: [
          {required: true, message: '选项不能为空！', trigger: 'blur'}
        ],
        discussContext: [
          {required: true, message: '标准答案不能为空！', trigger: 'blur'}
        ],
        courseId: [
          {required: true, message: '课程不能为空', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '试题题目不能为空', trigger: 'blur'}
        ],
        difficulty: [
          {required: true, message: '难度(0-低 1-中 2-高 3-超高)不能为空', trigger: 'blur'}
        ],
        type: [
          {
            required: true,
            message: '类型(0-单选 1-多选 2-判断 3-填空题 4-主观题) 若为主观题或多选题，答案为json数组格式，为了简便目前主观题只支持一个问题不能为空',
            trigger: 'blur'
          }
        ],
        createTime: [
          {required: true, message: '创建时间不能为空', trigger: 'blur'}
        ],
        updateTime: [
          {required: true, message: '更新时间不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    getCourseList(){
      fetchCourseList().then(response => {
        this.courseList = response.data
      })
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          getObj(this.dataForm.id).then(response => {
            this.questionType = response.data.type
            this.dataForm = response.data
            if (response.data.type === 1) {
              this.answerList = response.data.answer.split(" ")
              this.dataForm.answer = ''
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      if (this.dataForm.type === 1) {
          this.dataForm.answer = this.answerList.join(" ")
      }
      if (this.dataForm.answer === '' || this.dataForm.answer === undefined) {
        this.$message.warning("答案不能为空！")
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm).then(data => {
              this.$notify.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          } else {
            addObj(this.dataForm).then(data => {
              this.$notify.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          }
        }
      })
    },
    changeQuestionType(env){
      this.questionType = env
      this.dataForm.answerList = []
      this.dataForm.answer = ''
    }
  }
}
</script>
